<script setup>
</script>
<script>
export default {
  data (){
  return {
    list: [1, 2, 3],
  }
}
}
</script>

<template>
  <h1>本地的 todo list 代办清单</h1>
  <button>创建</button>
  <!-- 表格 -->
  <table>
    <tbody>
        <tr>
            <td>内容</td>
            <td>时间</td>
            <td>操作</td>
        </tr>
        <!-- 循环列表项 -->
        <tr v-for="(item,index) in list" :key="index">
          <td>{{item}}</td>
          <td>{{item}}</td>
          <td>
            <button>删除</button>
            <button>编辑</button>
          </td>
        </tr>
    </tbody>
</table>
</template>

<style scoped>
table {
  width: 100%;
}

tr {
  display: flex;
  border-bottom: 2px solid #f4f5f9;
}

td {
  flex: auto;
}
</style>
